<template>
	<view class="sec-body">
		<view class="fiexd-top">
			<view class="left-part">
				<label class="my-label">日期</label>
				<text>{{startDate}}</text>
				<text class="divider"> - </text>
				<text>{{endDate}}</text>
			</view>
			<view class="filter" @tap="showPopup">筛选 <uni-icon :class="active?'rotateArrow':''" type="arrowdown" size="16"></uni-icon>
			</view>
		</view>

		<luPopupWrapper ref="luPopupWrapper" class="my-lu-popup" type="top" transition="slider" backgroundColor="#fff" width='100%'
		 height="100%" :top="luTop" :active="active" popupId="my-popup1" :maskShow="true" :maskClick="true">
			<view class="content">
				<form class="uni-form">
					<view class="uni-form-item uni-column">
						<label class="title">开始日期</label>
						<picker class="my-picker" :value="form.startDate" mode="date" @change="changeStart">
							<view class="uni-input">{{form.startDate}}</view>
						</picker>
					</view>
					<view class="uni-form-item uni-column">
						<label class="title">结束日期</label>
						<picker class="my-picker" :value="form.endDate" mode="date" @change="changeEnd">
							<view class="uni-input">{{form.endDate}}</view>
						</picker>
					</view>
				</form>

				<view class="button-group">
					<button class="mini-btn" type="default" size="mini" @tap="closePopup">关闭</button>
					<button class="mini-btn margin-left-btn" type="primary" size="mini" @tap="confirmPopup">确定</button>
				</view>
			</view>
		</luPopupWrapper>

		<scroll-view class="uni-scroll-view-list sec-uni-scroll-view-list" scroll-y lower-threshold="50" @scrolltolower="loadMore">
			<uni-collapse v-if="listArr.length" accordion="true">
				<uni-collapse-item :title="list.AAC003+ ' 备案编号：'+list.AAZ267" v-for="(list, listIndex) in listArr" :key="listIndex"
				 :show-animation="true">
					<view class="sub-content">
						<view class="content">
							<view class="label">身份证号</view>
							<view class="results">{{list.AAC002}}</view>
						</view>
						<view class="content">
							<view class="label">社保卡号</view>
							<view class="results">{{list.AAZ500}}</view>
						</view>
						<view class="content">
							<view class="label">联系人</view>
							<view class="results">{{list.AAE004}}</view>
						</view>
						<view class="content">
							<view class="label">联系电话</view>
							<view class="results">{{list.AAE005}}</view>
						</view>
						<view class="content">
							<view class="label">审核状态</view>
							<view class="results">{{list.AAE016}}</view>
						</view>
						<view class="content">
							<view class="label">参保地行政区划代码</view>
							<view class="results">{{list.AKC803}}</view>
						</view>
						<view class="content">
							<view class="label">就医地行政区划代码</view>
							<view class="results">{{list.AKC801}}</view>
						</view>

						<view class="content">
							<view class="label">申报日期</view>
							<view class="results">{{list.AAE127}}</view>
						</view>
						<view class="content">
							<view class="label">待遇开始日期</view>
							<view class="results">{{list.AAE030}}</view>
						</view>
						<view class="content">
							<view class="label">待遇终止日期</view>
							<view class="results">{{list.AAE031}}</view>
						</view>
						<view class="content">
							<view class="label">险种类型</view>
							<view class="results">{{list.AAE140}}</view>
						</view>
						<view class="content">
							<view class="label">人员类别</view>
							<view class="results">{{list.AKA085}}</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<uni-load-more v-if="listArr.length" :status="status" :contentText="contentTxt"></uni-load-more>
			<view v-if="!listArr.length" style="padding:100upx 16upx;text-align: center;">
				<image src="../../static/image/order.png" mode="widthFix" style="width:180upx;"></image>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import luPopupWrapper from "@/components/lu-popup-wrapper/lu-popup-wrapper.vue";

	export default {
		components: {
			uniLoadMore,
			uniCollapse,
			uniCollapseItem,
			uniIcon,
			luPopupWrapper
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				luTop:'36px',
				active: false,
				startDate: currentDate,
				endDate: currentDate,
				form: {
					startDate: currentDate,
					endDate: currentDate,
				},
				listArr: [],
				AAC002: '',
				AAZ500: '',
				pageIndex: 1,
				totalPage: 1,
				status: 'more',
				contentTxt: {
					contentdown: "查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多",
				}
			}
		},
		methods: {
			confirmPopup() {
				if (!this.form.startDate || !this.form.endDate) {
					uni.showToast({
						title: '请选择日期',
						image: '../../static/image/info.png',
						duration: 2500
					});
					return false;
				}

				this.startDate = this.form.startDate;
				this.endDate = this.form.endDate;
				this.closePopup();
				this.pageIndex = 1;
				this.getData();
			},
			closePopup() {
				this.active = false;
				this.$refs.luPopupWrapper.close();
			},
			showPopup() {
				if (!this.active) {
					this.active = true;
					this.$refs.luPopupWrapper.show();
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			changeStart(e) {
				this.form.startDate = e.target.value
			},
			changeEnd(e) {
				this.form.endDate = e.target.value
			},
			loadMore(e) {
				if (this.pageIndex < this.totalPage) {
					this.pageIndex++;
					if (this.pageIndex > this.totalPage) {
						this.pageIndex = this.totalPage;
					}
					this.getData();

				}
			},
			getData() {
				var self = this;
				this.status = 'loading';
				this.$request('S1002', {
					AAC002: this.AAC002,
					AAZ500: this.AAZ500,
					PAGENUM: this.pageIndex,
					PAGESIZE: 16
				}, 'POST', function(res) {
					console.log(res);
					if (res.data.CODE == '0') {

						self.listArr = self.listArr.concat(res.data.DATA);
						self.totalPage = res.data.PAGESIZECOUNT;
						if (self.pageIndex == self.totalPage) {
							self.status = 'noMore'
						} else {
							self.status = 'more'
						}
					}
				})
			}
		},
		onLoad(param) {
			var userInfo = uni.getStorageSync('userInfo');
			this.AAZ500 = param.AAZ500;
			this.AAC002 = param.AAC002;
			this.getData();
		},
		onShow(){
			// #ifdef H5
			this.luTop = '80px';
			// #endif
			
			// #ifdef APP-PLUS || MP
			this.luTop = '36px';
			// #endif
		}
	}
</script>

<style>
	.sub-content {
		padding: 0 30upx;
	}

	.content {
		display: flex;
		justify-content: space-between;
		line-height: 70upx;
		padding: 0 30upx;
		font-size: 15px;
		border-top: 1px dashed #E4E7ED;
	}
</style>
